<template>

<div class="tags-box">
    <el-tag  @close="handelColseTab(tag,index)" :closable="tag.name  !== 'home'"  @click="changeMenu(tag)" :effect="$route.name == tag.name ? 'dark' :'plain'"   class="tag-btn" v-for="(tag,index) in tags" :key="index" >{{ tag.labal }}</el-tag>
</div> 
</template>
<script setup>
// 引入仓库
import {useAside} from '../store/index.js'
const main =useAside()
// 引入路由
import { useRoute,useRouter } from 'vue-router';
// 路由
const route= useRoute()
const router= useRouter()

// 点击跳转
const  changeMenu =(item)=>{
  main.selectMenu(item)
  router.push({name:item.name})
}
// 删除tag标签
const handelClose = (val)=>{
  main.closeTab(val)
}
// c
const handelColseTab=(tag,index)=>{

  const length=tags.length-1
  handelClose(tag)
  // 判断
  if(tag.name !== route.name ){
    return
  }
  if(index === length){
    router.push({
      name:tags[index-1].name
    })
  }else{
    router.push({
      name:tags[index].name
    })
  }

}




const tags = main.tabList 

</script>

<style lang="less">
.tags-box{
    margin-bottom: 8px;
    .tag-btn{
      margin-right: 7px;
      cursor: pointer;
    }
}


</style>